<template>
	<!-- <view class="item  mt10 " @click="goDetail" > -->
	<view class="item  mt10 " @tap="$u.throttle(goDetail, 1500)">
		<text 
			style="background-color: #FF4110;width: 200rpx;border-radius: 20rpx 0 20rpx 0;padding: 5rpx 10rpx;color: #fff;font-size: 24rpx;display: flex;justify-content: center;">
			{{list.isQA?'云油供应链保障 ':''}}{{list.freeSettings.length>0?'// 免费加油':''}}</text>
		<view class="body">
			<view class="one flex-between">
				<u-text size="17" bold lines="1" :text="list.name"></u-text>
				<view class="address flex">
					<u-icon name="weizhi" customPrefix="custom-icon" size="10"></u-icon>
					<text class="ml5">{{(list.distance*1000).toFixed(2)}}公里</text>
				</view>
			</view>
			<view class="two">
				<u-text size="12" lines="1" type="info" :text="list.address"></u-text>
			</view>
			<view class="three flex-between mt10">
				<view class="l">
					<view class="tag" v-show="list.sGuaranteed">
						// 提供供应保障
					</view>
				</view>
				<!-- <view class="r self-center">
					<text>券后价</text>
					<text class="amount ">
						<text class="symbol">￥</text>
						<text class="num">{{list.price}}</text>
					</text>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script setup>
	import API from "@/api/index.js"
	import {
		route
	} from '@/uni_modules/uview-plus';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		ref,
		onMounted
	} from 'vue';

	const props = defineProps({
		list: {
			type: Object,
			default: () => ({})
		},
		isFree: {
			type: Number,
			default: 0
		}
	})
	// 页面加载时获取位置
	onMounted(() => {
		// getLocation();
	});
	// 距离
	const distance = ref(0);

	// 计算距离的函数（Haversine公式）
	function calculateDistance(lat1, lng1, lat2, lng2) {
		const toRadians = (degree) => degree * Math.PI / 180;

		const R = 6371; // 地球半径（公里）
		const dLat = toRadians(lat2 - lat1);
		const dLng = toRadians(lng2 - lng1);

		const a =
			Math.sin(dLat / 2) * Math.sin(dLat / 2) +
			Math.cos(toRadians(lat1)) * Math.cos(toRadians(lat2)) *
			Math.sin(dLng / 2) * Math.sin(dLng / 2);

		const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));

		return R * c;
	}

	// 获取当前位置
	async function getLocation() {
		const targetLat = props.list.lat; // 目标纬度
		const targetLng = props.list.lng; // 目标经度
		const currentLat = uni.getStorageSync('location').lat; // 当前纬度
		const currentLng = uni.getStorageSync('location').lng; // 当前经度
		// 计算距离
		const dist = calculateDistance(
			currentLat,
			currentLng,
			targetLat,
			targetLng
		);

		// 保留两位小数
		distance.value = dist.toFixed(2);
	}
	const goDetail = () => {
		let userInfo = uni.getStorageSync('userInfo')
		console.log("isFree", props.isFree,userInfo.acknowledgeFree);
		if (props.isFree>0&&!userInfo.acknowledgeFree) {
			//免费加油 弹框
			uni.showModal({
				title: '免费加油协议',
				content: '这是一个模态弹窗这是一个模态弹窗这是一个模态弹窗这是一个模态弹窗这是一个模态弹窗这是一个模态弹窗这是一个模态弹窗这是一个模态弹窗这是一个模态弹窗这是一个模态弹窗这是一个模态弹窗这是一个模态弹窗这是一个模态弹窗这是一个模态弹窗这是一个模态弹窗这是一个模态弹窗这是一个模态弹窗这是一个模态弹窗这是一个模态弹窗',
				success: async function(res) {
					if (res.confirm) {
						let {code} = await API.EUser(userInfo.id)
						if(code==1){
							userInfo.acknowledgeFree=true
							console.log("userInfo",userInfo);
							uni.setStorageSync('userInfo',userInfo)
							uni.navigateTo({
								url: '/pages/gas_station_mall/gas_station_detail/index?data=' + JSON
									.stringify(props.list)
							})
						}else{
							uni.showToast({
								title:'请重试',
								icon:'none'
							})
						}
						
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		} else {
			uni.navigateTo({
				url: '/pages/gas_station_mall/gas_station_detail/index?data=' + JSON.stringify(props.list)
			})
		}

	}
</script>

<style lang="scss">
	.item {
		// padding: 0 20rpx;

		background-color: #fff;
		border-radius: 20rpx;

		flex: 1;

		.body {
			padding: 20rpx;

			.one {
				.address {
					background-color: #FAFAFA;
					padding: 10rpx 16rpx;
					font-size: 12px;
					border-radius: 20px;
					font-weight: 800;
				}


			}

			.three {
				.tag {
					padding: 0 10rpx;
					font-size: 20rpx;
					color: $u-primary;
					border: $u-primary solid 1px;
					padding-left: 1;
				}

				.r {
					font-size: 12px;

					.amount {
						color: $u-primary;
						font-family: SemiBold;
						font-weight: 600;
						font-size: 14px;

						.symbol {
							font-size: 12px;
						}

						.decimal {
							font-size: 12px;
						}

						.num {
							font-size: 20px;
						}
					}

				}
			}
		}
	}
</style>